<%-- 
    Document   : main
    Created on : Feb 6, 2012, 4:20:33 PM
    Author     : PhucAn
--%>

<%@page import="net.fckeditor.FCKeditor"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page import="util.SharingUtil"%>
<%@page import="dao.AnswerDAO"%>
<%@page import="dto.Answer"%>
<%@page import="dto.Question"%>
<%@page import="dao.QuestionDAO"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.fckeditor.net" prefix="fck" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<jsp:useBean id="question" class="dto.Question"/>
<jsp:setProperty name="question" property="id" param="id"/>
<jsp:setProperty name="question" property="content" param="content"/>
<%@include file="../handler/update-question-action.jsp" %> 
<%
QuestionDAO daoQuestion=new  QuestionDAO();
AnswerDAO daoAns=new AnswerDAO();
id=Integer.parseInt(request.getParameter("id"));
int categoryId=Integer.parseInt(request.getParameter("cateid"));
question=daoQuestion.getQuestion(id);
question.setAnswers(daoAns.getAnswersOfQuestion(id));
out.println(question.getAnswers().size());
%>
<!DOCTYPE html>
<html>
    <head>       
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
            var idx=<%=question.getAnswers().size()-1 %>;
            $(document).ready(function(){
                $("#add-more").click(function(){
                    idx++;
                    var row='<tr id="row-'+(idx+1)+'">';
                    row+='<td>Answer ';
                    row+=(idx+1);
                    row+='</td><td><textarea name="answer"></textarea></td>';
                    row+=('<td><input type="radio" id="single-ans-result-'+(idx+1)+'" value="'+(idx+1)+'" name="single-ans-result"/>');                  
                    row+='<input type="checkbox" id="multi-ans-result-'+(idx+1)+'" value="'+(idx+1)+'" name="multi-ans-result" style="display:none;"/>';
                    row+='<td><button onclick="removeThis(';
                    row+=+(idx+1)
                    row+=');">Remove</button></td></tr>';                    
                    $(row).insertBefore("#more");  
                    //check if current question is allow multichoice or not to display correnponding
                    if($('#multi-choice:checked').val()=='on'){
                        
                        $('#multi-ans-result-'+(idx+1)).show();
                        $('#single-ans-result-'+(idx+1)).hide();
                        // alert ($('#multi-choice:checked').val());
                    }else{
                        $('#multi-ans-result-'+(idx+1)).hide();
                        $('#single-ans-result-'+(idx+1)).show();
                    }
                   
                   
                });
                $('#multi-choice').click(function(){
                    if($('#multi-choice:checked').val()=='on'){                        
                        $('input:checkbox[name="multi-ans-result"]').show();
                        $('input:radio[name="single-ans-result"]').hide();                     
                    }else{
                        $('input:checkbox[name="multi-ans-result"]').hide();
                        $('input:radio[name="single-ans-result"]').show();
                    }
                   
                });
            });
            function removeThis(i){
                $('#row-'+i).remove();
            }
        </script>
    </head>    
    <body>              
                       
            <form method="post" action="#">
                <table width="90%" class="form-table">
                    <tr>
                        <td width="100">
                            Question content:
                        </td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td colspan="2">
                            <fck:editor inputName="content" instanceName="defaultEditor" height="150" toolbarSet="Basic" value="<%=question.getContent() %>"/>
                            
                        </td>

                    </tr>
                    <tr>
                        <td></td>
                        <td colspan="2"><input type="checkbox" id="multi-choice" name="multi-choice"  <%= question.isSingleChoice()?"":" checked='checked' "%>/>Allow multi-choice</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td colspan="2">Mark:<input type="text" name="mark" value="1" id="mark"/>
                            - Level: 
                            <select name="level">
                                <option value="1" <%=(question.getLevel()==1)?" selected='selected' ":""%>>Easy</option>
                                <option value="2" <%=(question.getLevel()==2)?" selected='selected' ":""%>>Medium</option>
                                <option value="3" <%=(question.getLevel()==3)?" selected='selected' ":""%>>Hard</option>
                            </select>
                        </td>
                    </tr>
                    <%
                    int index=0;
                    for(Answer ans:question.getAnswers()){
                        index++;                        
                    %>
                    <tr id="row-<%=index%>">
                        <td>Answer <%=index %>: </td>
                        <td><textarea name="answer" class="" ><%=ans.getContent() %></textarea></td>
                        <td>
                            <input type="radio" value="<%=index %>" id="single-ans-result-<%=index%>" name="single-ans-result" 
                                   <%= !question.getAnswers().get(index-1).getIsTrue() ?"":" checked='checked' "%>
                                   style="display: <%=!question.isSingleChoice()?"none":"block"%>;"
                                   />
                            <input type="checkbox" value="<%=index %>" id="multi-ans-result-<%=index%>" name="multi-ans-result" 
                                   style="display: <%=question.isSingleChoice()?"none":"block"%>;"
                                   <%= !question.getAnswers().get(index-1).getIsTrue() ?"":" checked='checked' "%>/>
                            <input type="hidden" name="ans-id" value="<%=question.getAnswers().get(index-1).getId() %>"/>
                        </td>
                        <td><button type="button"  onclick="removeThis(1);">Remove</button></td>
                    </tr>
                    <%
                                       }
                    %>
                    <tr id="more">
                        <td></td>
                        <td>                      
                        </td>
                        <td></td>
                        <td> <button id="add-more" name="add-more" type="button" >Add answer</button></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td colspan="3">
                            <input type="submit" name="update" value="Save changes"/>
                            <input type="submit" name="delete" value="Delete"/>
                        </td>
                    </tr>
                </table>
                        <input type="hidden" name="category-id" value="${param.cateid}"/>;
                        <input type="hidden" name="id" value="${param.id}"/>
            </form>
       
    </body>
</html>
